<template>
  <div class="collect-log">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-input
          v-model="listQuery.title"
          placeholder="请输入内容"
          size="small"
          clearable
        ></el-input>
      </el-col>
      <el-col :span="10">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          plain
          @click="getList"
          >搜索</el-button
        >
        <el-button
          :disabled="multipleSelection.length == 0"
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="handleBatchDelete"
          >删除</el-button
        >
        <el-button
          v-if="taskId"
          :disabled="tableData.length == 0"
          type="danger"
          size="small"
          icon="el-icon-delete"
          @click="clearLog"
          >清空记录</el-button
        >
      </el-col>
    </el-row>

    <el-table
      ref="multipleTable"
      :data="tableData"
      stripe
      row-key="id"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" reserve-selection>
      </el-table-column>
      <el-table-column prop="title" label="标题" show-overflow-tooltip>
        <template slot-scope="{ row }">
          <span class="txt-hover" @click="handlePreview(row)">{{
            row.title
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="author"
        label="作者"
        width="100"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          <span>{{ row.author || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="source"
        label="来源"
        width="150"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          <span>{{ row.source || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="pubDate"
        label="发布时间"
        width="120"
        show-overflow-tooltip
      >
        <template slot-scope="{ row }">
          <span>{{ row.pubDate || '--' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column label="操作" width="100">
        <template slot-scope="{ row }">
          <el-button-group>
            <el-button type="success" size="mini" @click="handlePreview(row)"
              >预览</el-button
            >
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      v-show="parseInt(pageObj.count) > 0"
      :total="parseInt(pageObj.count)"
      @change="getList"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
    />
    <Preview />
  </div>
</template>
<script>
export default {
  components: {
    Preview: () => import('../../Article/Preview.vue'),
  },
  data() {
    return {
      multipleSelection: [],
      listQuery: {
        page: 1,
        limit: 10,
        taskId: '',
        title: '',
      },
      tableData: [],
      pageObj: {},
    }
  },
  props: ['taskId'],
  mounted() {
    this.listQuery.taskId = this.taskId
    this.getList()
  },
  methods: {
    async getList() {
      let res = await this.$store.dispatch('querySpiderLog', this.listQuery)
      this.tableData = res.data
      this.pageObj = res
      this.multipleSelection = []
    },
    //预览
    handlePreview(row) {
      this.$bus.$emit('collectLogPreview', row)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    //批量删除
    handleBatchDelete() {
      if (!this.multipleSelection.length) {
        this.warnMsg('请选择要删除的数据')
        return
      }
      this.deleteTips(this.deleteAll)
    },
    //批量删除
    async deleteAll() {
      let ids = this.multipleSelection.map((v) => v.id)
      await this.$store.dispatch('deleteBatchSpiderLog', ids)
      this.getList()
    },
    //清空记录
    clearLog() {
      this.deleteTips(
        async () => {
          await this.$store.dispatch('deleteAllSpiderLog', this.taskId)
          this.getList()
        },
        '确定要清空数据吗',
        '清空',
      )
    },
  },
}
</script>